<template>
  <div>
    <Modal v-model="modalValue" width="960" title="查看源信息" :mask-closable="false" footer-hide @on-cancel="onCancel">
      <div class="info">
        <Row type="flex" justify="space-between" align="middle">
          <Col class="grey">{{ info.projectName }}</Col>
          <Col>
            <BtnText type="primary" @BtnClick="goToDetails(info)">查看详情</BtnText>
          </Col>
        </Row>
        <Form>
          <Row class="com-form-item mt-5">
            <Col span="12">
              <FormItem label="省份:">{{ info.province }}</FormItem>
            </Col>
            <Col span="12">
              <FormItem label="城市:">{{ info.city }}</FormItem>
            </Col>
            <Col span="12">
              <FormItem label="产业标记:">{{ info.infoTypeName }}</FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <Table :columns="columns" :data="info.derivativeList">
        <template slot-scope="{ row }" slot="projectName">
          <BtnText type="primary" @BtnClick="goToDetails(row)">{{ row.projectName }}</BtnText>
        </template>
        <template slot="view"><BtnPlain type="primary">派生信息</BtnPlain></template>
      </Table>
    </Modal>
  </div>
</template>

<script>
import { busiInfoGetRootData } from '@/api/businessInformationManage.js'
export default {
  name: 'sourceInfo',
  model: {
    prop: "value",
    event: "input",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    parentId: {
      type: String,
      default: ''
    }
  },
  watch: {
    value: {
      // immediate: true, // 立即执行 :当刷新页面时会立即执行一次handler函数
      handler (val) {
        this.modalValue = val
        if (val) {
          this.init()
        }
      }
    }
  },
  data () {
    return {
      modalValue: false,
      columns: [
        {
          title: '项目名称',
          key: 'projectName',
          slot: 'projectName',
        },
        {
          title: '省份',
          key: 'province',
        },
        {
          title: '城市',
          key: 'city',
        },
        {
          title: '产业标记',
          key: 'infoTypeName',
        },
        {
          title: '派生信息标签',
          slot: 'view',
        },
      ],
      listData: [],
      info: {}
    }
  },
  methods: {
    // 初始化数据
    async init () {
      this.info = await busiInfoGetRootData({ parentId: this.parentId })
    },
    onCancel () {
      this.$emit('input', false)
    },
    // 详情页
    goToDetails (row, type = 'view') {
      const { busiInfoId } = row
      this.$router.push({ path: '/businessInformationDetails', query: { busiInfoId, type } })
    }
  }
};
</script>

<style lang="less" scoped>
.info {
  padding: 10px 20px;
  margin-bottom: 20px;
  border-radius: 10px;
  background: linear-gradient(#f5f7ff, #fff 50%);
}

.grey {
  color: #7b8591;
}

.mt-5 {
  margin-top: 5px;
}
</style>
